<template>
    <el-container>
        <el-header class='header'>
            <div>
                <el-icon>
                    <Back @click="goback"/>
                </el-icon>
            </div>
            <div>历史行程详情</div>
            <div>
                <el-icon>
                    <Bell/>
                </el-icon>
            </div>
        </el-header>

        <el-main class='body'>
            <el-card class="box-card" shadow="always">
                <!--行程信息展示-->
                <el-descriptions
                    class="des-info"
                    title="行程信息"
                    :column="2"
                    :size="size"
                    direction="horizontal"
                    :style="blockMargin"
                    :model="tripData"
                >
                    <el-descriptions-item label="行程路线" :span="2">
                        {{ tripData.route }}
                    </el-descriptions-item>
                    <el-descriptions-item label="出发时间" :span="2">{{ tripData.start_date }} {{ tripData.start_time }}</el-descriptions-item>
                    <el-descriptions-item label="人数">
                        <el-tag size="small" class="tag-pnum">{{ tripData.num_passengers }}人</el-tag>/{{ tripData.max_seat_capacity }}座
                    </el-descriptions-item>
                    <el-descriptions-item label="价格">
                        <el-tag size="small" class="tag-price">{{ tripData.price }}元</el-tag>
                        /人
                    </el-descriptions-item>
                </el-descriptions>

                <el-divider></el-divider>

                <!--乘客信息展示-->
                <div v-for="(passenger,index) in passengerData" :key="index">
                    <el-descriptions
                        title="乘客信息"
                        :column="2"
                        :size="size"
                        direction="horizontal"
                        :style="blockMargin"
                    >
                        <el-descriptions-item label="乘客姓名" :span="2">{{ passenger.name }}</el-descriptions-item>
                        <el-descriptions-item label="乘客电话">{{ passenger.phone }}
                        </el-descriptions-item>
                        <el-descriptions-item :span="1">
                            <el-button size="small"
                                       type=""
                                       :icon="Phone"
                                       class="btn-call"
                                       @click="call(passenger.name,passenger.phone)"
                                       round
                            >呼叫乘客
                            </el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="乘客位置" :span="1">

                            {{ passenger.startLocationName }}
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>
        </el-main>
    </el-container>

    <!--拨打电话弹框-->
    <el-drawer
        v-model="drawer2"
        :direction="direction">
        <template #header>
            <h4>确认呼叫 {{flashName}} ?</h4>
        </template>
        <template #default>
            <div>
                <el-card shadow="hover">{{ flashTel }}</el-card>
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="confirmClick">立即呼叫</el-button>
            </div>
        </template>
    </el-drawer>
</template>


<script lang="ts" setup>
import {computed, onMounted, ref} from 'vue';
import {ElMessageBox} from 'element-plus';
import {Bell, Back, Phone} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {useCounterStore} from '../stores/counter.js'
import request from "../utils/request.js";



/*
  数据定义
 */
const size = ref('')
const blockMargin = computed(() => {
    const marginMap = {
        large: '32px',
        default: '28px', small: '24px',
    }
    return {
        marginTop: marginMap[size.value] || marginMap.default,
    }
})
let drawer2 = ref(false)
let flashTel = ref('')
let flashName = ref('')
const direction = ref('btt')


const router = useRouter()
const store = useCounterStore(); // 使用 Vuex Store


const passengerData = ref({
    id: "55",
    name: "蔡岚",
    phone: "14752103122",
    status: "行程中",
    startLocationName: "阿拉尔",
    startLocationLongitude: 80.956483,
    startLocationLatitude: 40.393596,
    vehicleTripId: "52",})
const tripData = ref({
    id:"",
    max_seat_capacity: "",
    num_passengers: "",
    price: "",
    route: "",
    start_date: "",
    start_time: "",
    status: ""
}) //行程信息
let refresh = {
    id:"",
    max_seat_capacity: "",
    num_passengers: "",
    price: "",
    route: "",
    start_date: "",
    start_time: "",
    status: ""
}  //用于条件判断
const vtid = store.skipData.id

//获取乘客信息
const getPassengerDetail = () => {
    request.get(`/vehicle-trip/vehiclePassenger/${vtid}`).then(result => {
        passengerData.value = result.data;
        //转换电话号码为3-4-4格式
        let i = 0;
        let p = passengerData.value[i].phone;
        for (i; i < passengerData.value.length; i++){
        passengerData.value[i].phone = p.substring(0, 3) + '-' + p.substring(3, 7) + '-' + p.substring(7, 11);
        }
    })
}



//页面刷新保留store数据
if(JSON.stringify(store.skipData) != JSON.stringify(refresh)) {
    //将数据存储到session中
    sessionStorage.setItem('trip', JSON.stringify(store.skipData))
}
//从session中获取数据
tripData.value = JSON.parse(sessionStorage.getItem('trip'))

/*
  勾子
 */
onMounted(() => {
    getPassengerDetail();
})

/*
  方法
 */
function test(test){
    alert(test);
    console.log(test)
    console.log(store.skipData.id);
    // const userid = localStorage.getItem("userId");
}

//呼叫乘客数据回显
function call(nm,tel) {
    flashTel.value = null;
    flashName.value = null;
    drawer2.value = true;
    flashTel.value = tel
    flashName.value = nm;
}

//关闭抽屉
function cancelClick() {
    drawer2.value = false
}

//呼叫确认
function confirmClick() {
    ElMessageBox.confirm(`正在呼叫${flashName.value} ${flashTel.value} `)
        .then(() => {
            drawer2.value = false
        })
        .catch(() => {
            // catch error
        })
}

//返回上一页
function goback(){
    history.go(-1);
}

</script>


<style lang='less' scoped>

.header {
    position: fixed;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    background-color: #BDDCFF;
    height: 60px;
    width: 100%;
    line-height: 60px;
    color: #495e77;
    padding: 0 12px;
}

.box-card {
    margin-top: 60px;
    margin-bottom: 60px;
}

.des-info {
    margin-top: 10px !important;
}

.tag-pnum {
    font-size: small;
}

.tag-price {
    font-size: small;
}

.btn-call {
    font-size: 100%;
}

.float-button {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;
    bottom: 10%;
}

.btn-trip {
    font-size: x-large;
    margin-right: auto;
    margin-left: auto;
    padding: 25px;
    line-height: 50%;
}


</style>
